<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信账号信息</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#07C160',
            secondary: '#F7F7F7',
            dark: '#333333',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-green-50 to-blue-50 min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white bg-opacity-95 backdrop-blur-sm shadow-sm fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-weixin text-primary text-2xl"></i>
        <span class="text-lg font-semibold text-dark">微信账号展示</span>
      </div>
      <div class="hidden md:flex items-center space-x-8">
        <a href="#about" class="text-gray-600 hover:text-primary transition-colors">关于</a>
        <a href="#contact" class="text-gray-600 hover:text-primary transition-colors">联系方式</a>
        <a href="#qr" class="text-gray-600 hover:text-primary transition-colors">二维码</a>
      </div>
      <button class="md:hidden text-gray-600 focus:outline-none" id="menu-toggle">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white w-full absolute shadow-lg" id="mobile-menu">
      <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
        <a href="#about" class="text-gray-600 hover:text-primary py-2 transition-colors">关于</a>
        <a href="#contact" class="text-gray-600 hover:text-primary py-2 transition-colors">联系方式</a>
        <a href="#qr" class="text-gray-600 hover:text-primary py-2 transition-colors">二维码</a>
      </div>
    </div>
  </nav>

  <!-- 英雄区域 -->
  <header class="pt-24 pb-16 md:pt-32 md:pb-24 text-center">
    <div class="container mx-auto px-4">
      <div class="mb-8 animate-fade-in-down">
        <div class="inline-block p-2 bg-white rounded-full shadow-lg mb-4">
          <img src="https://picsum.photos/id/64/200" alt="微信头像" class="w-24 h-24 md:w-32 md:h-32 rounded-full object-cover border-4 border-primary">
        </div>
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-2 text-shadow">欢迎关注我的微信</h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">感谢您访问我的微信账号展示页面</p>
      </div>
      
      <!-- 微信账号卡片 -->
      <div class="max-w-md mx-auto bg-white rounded-2xl shadow-xl overflow-hidden card-hover mb-8">
        <div class="p-6 md:p-8">
          <div class="flex items-center justify-between mb-4">
            <span class="text-gray-500 font-medium">微信账号</span>
            <i class="fa fa-id-card text-primary text-xl"></i>
          </div>
          <div class="bg-gray-50 rounded-lg p-4 flex items-center justify-between">
            <span class="text-2xl font-bold text-dark" id="wechat-id">Z-S121218</span>
            <button id="copy-btn" class="bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1.5 rounded-lg transition-colors flex items-center space-x-1">
              <i class="fa fa-copy"></i>
              <span>复制</span>
            </button>
          </div>
        </div>
        <div class="bg-secondary p-4 text-center">
          <p class="text-gray-500 text-sm">请复制上方微信账号添加好友</p>
        </div>
      </div>

      <!-- 按钮组 -->
      <div class="flex flex-wrap justify-center gap-4">
        <a href="#qr" class="bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-full shadow-lg hover:shadow-xl transition-all flex items-center space-x-2">
          <i class="fa fa-qrcode"></i>
          <span>查看二维码</span>
        </a>
        <a href="#contact" class="bg-white hover:bg-gray-50 text-dark font-medium px-6 py-3 rounded-full shadow-md hover:shadow-lg transition-all flex items-center space-x-2">
          <i class="fa fa-envelope"></i>
          <span>联系我</span>
        </a>
      </div>
    </div>
  </header>

  <!-- 关于部分 -->
  <section id="about" class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark text-center mb-12">关于我</h2>
      
      <div class="max-w-3xl mx-auto">
        <div class="grid md:grid-cols-2 gap-8">
          <div class="bg-secondary rounded-xl p-6 card-hover">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
              <i class="fa fa-user text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">个人信息</h3>
            <p class="text-gray-600">欢迎通过微信与我联系，我期待与您的交流和合作。</p>
          </div>
          
          <div class="bg-secondary rounded-xl p-6 card-hover">
            <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
              <i class="fa fa-comments text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">沟通交流</h3>
            <p class="text-gray-600">您可以通过微信与我讨论各种话题，我会尽快回复您的消息。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 二维码部分 -->
  <section id="qr" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark text-center mb-12">微信二维码</h2>
      
      <div class="max-w-md mx-auto bg-white rounded-2xl shadow-lg p-8 text-center card-hover">
        <div class="mb-6">
          <!-- 微信二维码 -->
          <div class="bg-white border-2 border-gray-200 inline-block p-4 rounded-lg">
            <img src="微信图片_20251021123658_34_6.jpg" alt="微信二维码" class="w-64 h-64 md:w-72 md:h-72 object-contain">
          </div>
        </div>
        <h3 class="text-xl font-semibold mb-2">扫描二维码添加好友</h3>
        <p class="text-gray-600">请使用微信扫描上方二维码，添加我的微信账号</p>
        <p class="text-primary font-medium mt-4">Z-S121218</p>
      </div>
    </div>
  </section>

  <!-- 联系部分 -->
  <section id="contact" class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark text-center mb-12">联系方式</h2>
      
      <div class="max-w-2xl mx-auto">
        <div class="bg-primary/5 rounded-2xl p-8">
          <div class="space-y-6">
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white">
                <i class="fa fa-weixin text-2xl"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-700">微信</h4>
                <p class="text-dark font-semibold">Z-S121218</p>
              </div>
            </div>
            
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white">
                <i class="fa fa-envelope text-2xl"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-700">邮箱</h4>
                <p class="text-dark font-semibold">contact@example.com</p>
              </div>
            </div>
            
            <div class="flex items-center space-x-4">
              <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center text-white">
                <i class="fa fa-weibo text-2xl"></i>
              </div>
              <div>
                <h4 class="font-medium text-gray-700">微博</h4>
                <p class="text-dark font-semibold">@用户名</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
      <div class="text-center">
        <div class="flex justify-center space-x-6 mb-4">
          <a href="#" class="text-white hover:text-primary transition-colors">
            <i class="fa fa-weixin text-xl"></i>
          </a>
          <a href="#" class="text-white hover:text-primary transition-colors">
            <i class="fa fa-weibo text-xl"></i>
          </a>
          <a href="#" class="text-white hover:text-primary transition-colors">
            <i class="fa fa-envelope text-xl"></i>
          </a>
        </div>
        <p class="text-gray-400 mb-2">微信账号：Z-S121218</p>
        <p class="text-gray-500 text-sm">© 2023 微信账号展示页面 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 复制成功提示 -->
  <div id="copy-notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300">
    <div class="flex items-center space-x-2">
      <i class="fa fa-check-circle"></i>
      <span>微信账号已复制到剪贴板</span>
    </div>
  </div>

  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2', 'shadow-md');
        navbar.classList.remove('py-3', 'shadow-sm');
      } else {
        navbar.classList.add('py-3', 'shadow-sm');
        navbar.classList.remove('py-2', 'shadow-md');
      }
    });

    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });

    // 复制微信账号
    const copyBtn = document.getElementById('copy-btn');
    const wechatId = document.getElementById('wechat-id').textContent;
    const copyNotification = document.getElementById('copy-notification');

    copyBtn.addEventListener('click', () => {
      navigator.clipboard.writeText(wechatId).then(() => {
        // 显示通知
        copyNotification.classList.remove('translate-y-20', 'opacity-0');
        copyNotification.classList.add('translate-y-0', 'opacity-100');
        
        // 3秒后隐藏通知
        setTimeout(() => {
          copyNotification.classList.add('translate-y-20', 'opacity-0');
          copyNotification.classList.remove('translate-y-0', 'opacity-100');
        }, 3000);
      }).catch(err => {
        console.error('无法复制文本: ', err);
      });
    });

    // 添加页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
      document.body.classList.add('loaded');
    });
  </script>
</body>
</html>